<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/rec";
%>
<!DOCTYPE html>
<html class="no-focus translated-ltr">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="author" content="pixelcave">
	<meta name="robots" content="noindex, nofollow">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>zzblog-ZZ博客</title>
		<!-- Icons -->
	<!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
	<link rel="shortcut icon" href="<%= filePath %>/lexyui/img/favicons/favicon.png">
	
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-96x96.png" sizes="96x96">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-160x160.png" sizes="160x160">
	<link rel="icon" type="image/png" href="<%=filePath %>/lexyui/assets/img/favicons/favicon-192x192.png" sizes="192x192">
	
	<link rel="apple-touch-icon" sizes="57x57" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="<%=filePath %>/lexyui/assets/img/favicons/apple-touch-icon-180x180.png">
	<!-- END Icons -->
	
	<!-- Stylesheets -->
	<!-- Web fonts -->
	<!-- 
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700%7COpen+Sans:300,400,400italic,600,700">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700%7COpen+Sans:300,400,400italic,600,700">
	 -->	
	 
    <!-- Page JS Plugins CSS -->
    <%-- <link rel="stylesheet" href="<%=filePath %>/lexyui/assets/js/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="<%=filePath %>/lexyui/assets/js/plugins/select2/select2-bootstrap.min.css"> --%>
	
    <!-- Page JS Plugins CSS -->
    <link rel="stylesheet" href="<%=filePath %>/lexyui/assets/js/plugins/magnific-popup/magnific-popup.min.css">
	
	<!-- Bootstrap and OneUI CSS framework -->
	<link rel="stylesheet" href="<%=filePath %>/lexyui/assets/css/bootstrap.min.css">
	<link rel="stylesheet" id="css-main" href="<%=filePath %>/lexyui/assets/css/oneui.css">
	
	<style type="text/css">
		.content-boxed {
		    max-width: 1380px !important;
		}
		
		a img{
		    display: block;
		    max-width: 100%;
		    height: auto;}
		.col-xs-6{
		    position: relative;
		    min-height: 1px;
		    padding-right: 5px;
		    padding-left: 5px;
		}
		#gallery-grid .block-content{
			    padding: 10px 10px 1px;
		}
		.content .items-push > div {
		    margin-bottom: 16px;
		}
	</style>
	
	
</head>
<body>
	<div id="page-container" class="sidebar-l sidebar-mini sidebar-o side-scroll header-navbar-fixed">
		<!-- Sidebar -->
		<jsp:include page="rec_menu.jsp"></jsp:include>
		<!-- END Sidebar -->
		<!-- Header -->
		<jsp:include page="rec_fixed_top.jsp"></jsp:include>
		<!-- END Header -->
		
		
		
		<!-- Main Container -->
            <main id="main-container">
                <!-- Hero Content -->
                <div class="bg-image" style="background-image: url('assets/img/photos/photo24@2x.jpg');">
                    <div class="bg-primary-dark-op">
                        <section class="content content-full content-boxed overflow-hidden">
                            <!-- Section Content -->
                            <div class="push-100-t push-50 text-center">
                                <h1 class="h2 text-white push-10 visibility-hidden" data-toggle="appear" data-class="animated fadeInDown">${blogInfo.blog_title}</h1>
                                <h2 class="h5 text-white-op visibility-hidden" data-toggle="appear" data-class="animated fadeInDown">Feel free to explore and read.</h2>
                            </div>
                            <!-- END Section Content -->
                        </section>
                    </div>
                </div>
                
                <!-- END Hero Content -->
                <section class="content content-boxed">
                 <div class="row items-push content-boxed js-gallery-advanced">
                 	<!-- <div class="col-sm-6"> -->
                 	 <div class="col-lg-2">
                            <!-- Collapsible Inbox Navigation (using Bootstrap collapse functionality) -->
                            <button class="btn btn-block btn-primary visible-xs push" data-toggle="collapse" data-target="#inbox-nav" type="button">标签分类</button>
                            <div class="collapse navbar-collapse remove-padding" id="inbox-nav">
                                <!-- Inbox Menu -->
                                <div class="block">
                                    <div class="block-header bg-gray-lighter">
                                        <ul class="block-options">
                                            <li>
                                                <button data-toggle="modal" data-target="#modal-compose" type="button"><i class="fa fa-pencil"></i> New Message</button>
                                            </li>
                                        </ul>
                                        <h3 class="block-title">Inbox</h3>
                                    </div>
                                    <div class="block-content">
                                        <ul class="nav nav-pills nav-stacked push">
                                            <li class="active">
                                                <a href="base_pages_inbox.html">
                                                    <span class="badge pull-right">3</span><i class="fa fa-fw fa-inbox push-5-r"></i> Inbox
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)">
                                                    <span class="badge pull-right">48</span><i class="fa fa-fw fa-star push-5-r"></i> Starred
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)">
                                                    <span class="badge pull-right">1480</span><i class="fa fa-fw fa-send push-5-r"></i> Sent
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)">
                                                    <span class="badge pull-right">2</span><i class="fa fa-fw fa-pencil push-5-r"></i> Draft
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)">
                                                    <span class="badge pull-right">1987</span><i class="fa fa-fw fa-folder push-5-r"></i> Archive
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)">
                                                    <span class="badge pull-right">10</span><i class="fa fa-fw fa-trash push-5-r"></i> Trash
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- END Inbox Menu -->
                            </div>
                            <!-- END Collapsible Inbox Navigation -->
                        </div>
                        
                        <div class="col-lg-3 animated fadeIn">
                        	<c:forEach items="${map.galleryList_0 }" var="obj">
								<div class="block">
		                        	<div class="block img-container fx-img-rotate-r">
			                             <img class="img-responsive" src="http://101.201.68.159:8080/upload/${obj.uploadPath}/${obj.fileName}" alt="${obj.fileName}">
			                             <div class="img-options">
			                                 <div class="img-options-content">
			                                     <h3 class="font-w400 text-white push-5">Image Caption</h3>
			                                     <h4 class="h6 font-w400 text-white-op push-15">Some Extra Info</h4>
			                                     <a class="btn btn-sm btn-default img-lightbox" href="http://101.201.68.159:8080/upload/${obj.uploadPath}/${obj.fileName}">
			                                         <i class="fa fa-search-plus"></i> View
			                                     </a>
			                                     <div class="btn-group btn-group-sm">
			                                         <a class="btn btn-default" href="javascript:void(0)"><i class="fa fa-pencil"></i> Edit</a>
			                                         <a class="btn btn-default" href="javascript:void(0)"><i class="fa fa-times"></i> Delete</a>
			                                     </div>
			                                 </div>
			                             </div>
		                         	</div>
								</div>
                        	</c:forEach>
                        </div>
                        <div class="col-lg-3 animated fadeIn">
                        	<c:forEach items="${map.galleryList_1}" var="obj">
	                        	<div class="block">
		                        	<div class="img-container fx-img-rotate-r">
			                             <img class="img-responsive" src="http://101.201.68.159:8080/upload/${obj.uploadPath}/${obj.fileName}" alt="${obj.fileName}">
			                             <div class="img-options">
			                                 <div class="img-options-content">
			                                     <h3 class="font-w400 text-white push-5">Image Caption</h3>
			                                     <h4 class="h6 font-w400 text-white-op push-15">Some Extra Info</h4>
			                                     <a class="btn btn-sm btn-default img-lightbox" href="http://101.201.68.159:8080/upload/${obj.uploadPath}/${obj.fileName}">
			                                         <i class="fa fa-search-plus"></i> View
			                                     </a>
			                                     <div class="btn-group btn-group-sm">
			                                         <a class="btn btn-default" href="javascript:void(0)"><i class="fa fa-pencil"></i> Edit</a>
			                                         <a class="btn btn-default" href="javascript:void(0)"><i class="fa fa-times"></i> Delete</a>
			                                     </div>
			                                 </div>
			                             </div>
		                         	</div>
	                        	</div>
                        	</c:forEach>	
                        </div>
                        <div class="col-lg-3 animated fadeIn">
                        	<c:forEach items="${map.galleryList_2 }" var="obj">
	                        	<div class="block  ">
		                        	<div class="img-container fx-img-rotate-r">
			                             <img class="img-responsive" src="http://101.201.68.159:8080/upload/${obj.uploadPath}/${obj.fileName}" alt="${obj.fileName}">
			                             <div class="img-options">
			                                 <div class="img-options-content">
			                                     <h3 class="font-w400 text-white push-5">Image Caption</h3>
			                                     <h4 class="h6 font-w400 text-white-op push-15">Some Extra Info</h4>
			                                     <a class="btn btn-sm btn-default img-lightbox" href="http://101.201.68.159:8080/upload/${obj.uploadPath}/${obj.fileName}">
			                                         <i class="fa fa-search-plus"></i> View
			                                     </a>
			                                     <div class="btn-group btn-group-sm">
			                                         <a class="btn btn-default" href="javascript:void(0)"><i class="fa fa-pencil"></i> Edit</a>
			                                         <a class="btn btn-default" href="javascript:void(0)"><i class="fa fa-times"></i> Delete</a>
			                                     </div>
			                                 </div>
			                             </div>
		                         	</div>
	                        	</div>
                        	</c:forEach>
                        </div>
                        
                  	</div>
				</section>
                </div>
				

                <!-- Get Started -->
                <div class="bg-primary-dark">
                    <section class="content content-full content-boxed">
                        <!-- Section Content -->
                        <div class="push-20-t push-20 text-center">
                            <h3 class="h4 text-white-op push-20 visibility-hidden" data-toggle="appear">Do you like our stories? Sign up today and get access to over <strong>10.000</strong> travel stories!</h3>
                            <a class="btn btn-rounded btn-noborder btn-lg btn-success visibility-hidden" data-toggle="appear" data-class="animated bounceIn" href="frontend_pricing.html">Get Started Today</a>
                        </div>
                        <!-- END Section Content -->
                    </section>
                </div>
                <!-- END Get Started -->
            </main>
            <!-- END Main Container -->
		
		
		
		
        <!-- Apps Modal -->
		<!-- Opens from the button in the header -->
		<div class="modal fade" id="apps-modal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-sm modal-dialog modal-dialog-top">
				<div class="modal-content">
					<!-- Apps Block -->
					<div class="block block-themed block-transparent">
						<div class="block-header bg-primary-dark">
							<ul class="block-options">
								<li>
									<button data-dismiss="modal" type="button">
										<i class="si si-close"></i>
									</button>
								</li>
							</ul>
							<h3 class="block-title">Apps</h3></div>
						<div class="block-content">
							<div class="row text-center">
								<div class="col-xs-6">
									<a class="block block-rounded" href="base_pages_dashboard.html">
										<div class="block-content text-white bg-default">
											<i class="si si-speedometer fa-2x"></i>
											<div class="font-w600 push-15-t push-15">Backend</div></div>
									</a>
								</div>
								<div class="col-xs-6">
									<a class="block block-rounded" href="frontend_home.html">
										<div class="block-content text-white bg-modern">
											<i class="si si-rocket fa-2x"></i>
											<div class="font-w600 push-15-t push-15">Frontend</div></div>
									</a>
								</div>
							</div>
						</div>
					</div>
					<!-- END Apps Block --></div>
			</div>
		</div>
	</div>
            
	<!-- OneUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock, Appear, CountTo, Placeholder, Cookie and App.js -->
	<script src="<%=filePath %>/lexyui/assets/js/core/jquery.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/bootstrap.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/jquery.slimscroll.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/jquery.scrollLock.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/jquery.appear.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/jquery.countTo.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/jquery.placeholder.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/core/js.cookie.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/app.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/pub.js"></script>
	
	
	
	<!-- Page JS Plugins -->
	<%-- <script src="<%=filePath %>/lexyui/assets/js/plugins/jquery-validation/jquery.validate.min.js"></script>
	<script src="<%=filePath %>/lexyui/assets/js/plugins/jquery-validation/additional-methods.min.js"></script> --%>
    <script src="<%=filePath %>/lexyui/assets/js/plugins/magnific-popup/magnific-popup.min.js"></script>
	<!-- Page JS Code -->
	<script>
		jQuery(function () {
			App.initHelpers('magnific-popup');
			App.initHelpers('appear');
		})
	   jQuery(function () {
	   	
	   	 // Init page helpers (Appear plugin)
	      
	   	 $("#btn-form").click(function(){
	   		 
	   		 
	   		ajaxForm();
	   	 })
	   	 
	   	 
	   	 $(".pagination a").click(function(){
	   		 
	   		 $(this).addClass("active");
	   		 alert($(this).text());
	   		 
	   	 })
	   	 
	   });
	   
	   function ajaxForm(){
		   
		   var validata = $("#sginup-form").valid();
		   var data = jQuery("#sginup-form").serializeObject();
		   
		   if(validata){
		   		var result =  doPost("sginup", data);
		   		if(result.code="200"){
		   			alert(result.message);
		   			window.location.href="log";
		   		}
		   		
		   		
		   }
	   }
	   
	   
	   
	   
	</script>
</body>
</html>